import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MathComponent } from './math.component';
import { MathDirective } from './math.directive';
import { MathService, MathServiceImpl } from './math.service';

@NgModule({
  declarations: [MathDirective],
  exports: [MathDirective],
})
export class MathModule {
  constructor(mathService: MathServiceImpl) {
    const script = document.createElement("script") as HTMLScriptElement;
    script.type = "text/javascript";
    script.src = "https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js";
    script.async = true;
    document.getElementsByTagName("head")[0].appendChild(script);
    (window as any).MathJax = {
      tex: {
        inlineMath: [["$", "$"]],
        displayMath: [["$$", "$$"]],
      },
      options:{
        ignoreHtmlClass: "tex2jax_ignore",
      }
    };
  }

  // this is needed so service constructor which will bind
  // notifier to window object before module constructor is called
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: MathModule,
      providers: [{ provide: MathServiceImpl, useClass: MathServiceImpl }],
    };
  }
}
